import React, { Component } from 'react';
class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userList:[]
    }
  }
  componentDidMount () {
    let uidt = JSON.parse(localStorage.getItem('uid'))
    let uid = JSON.parse(uidt)
    let arrs = []
    fetch(`https://sun.daxunxun.com/api/collect/user?uid=`+uid)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      for(let i=0; i<data.length;i++){
        // console.log(data[i].f_id)
        let fid = data[i].f_id
        fetch(`https://sun.daxunxun.com/api/food/detail?f_id=`+fid)
        .then(res => res.json())
        .then(data => {
          console.log(data)
          arrs.push(data)
          this.setState({
            userList:arrs
          })
          localStorage.setItem('foodlist', JSON.stringify(data))
        })
      }
    })
    
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  render () {
    // let username = JSON.parse(localStorage.getItem('username'))  
    let names = JSON.parse(localStorage.getItem('names'))  
    let cookList = this.state.userList;
    console.log(cookList)   // 一次只出现了一个数据
    let arr = []
    for (let i in cookList) {
      let list = cookList[i]
      for (let j in list) {
        console.log(list[j])
        let after = list[j]
        arr.push(after)
      }
    }

    return (
      <div className="cook">
        <h2>{ names }收藏的菜谱</h2>
        <div className="cook_list">
          <ul>
            {
              arr.map((item,index) => {
                return(
                  <li onClick={ this.goDetail.bind(this, item.f_id) } key={index} >
                    <img src={ item.banner } alt=""/>
                    <a href="/detail/:id">{ item.name}</a>
                    <span className="sp1">{ item.number} 做过</span>
                    <span className="sp2">{ item.score} 收藏</span>
                    <a href="/user/:id" className="uid">{ item.u_name }</a>
                  </li>
                )
              })
            }
            
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;